<template>
    <basic-container>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="山东各地区被攻击次数统计" name="sdCityDbAttacked">
                <sd-city-db-attacked ref="sdCityDbAttacked"></sd-city-db-attacked>
            </el-tab-pane>
            <el-tab-pane label="对山东数据库发起攻击的国家统计" name="attackSdDbCountry">
                <attack-sd-db-country ref="attackSdDbCountry" ></attack-sd-db-country>
            </el-tab-pane>
        </el-tabs>
    </basic-container>
</template>

<script>
    import sdCityDbAttacked from "./sdCityDbAttacked";
    import attackSdDbCountry from "./attackSdDbCountry";
  export default {
    data() {
      return {
        activeName: "sdCityDbAttacked"
      }
    },
    methods: {
      handleClick(tab) {
        if(tab.name == "attackSdDbCountry") {
          this.$nextTick(() => {
            if (this.$refs.attackSdDbCountry.$refs.crud.$refs.table) {
              this.$refs.attackSdDbCountry.$refs.crud.$refs.table.doLayout();
            }
          })
        }else if(tab.name == "sdCityDbAttacked") {
          this.$nextTick(() => {
            if (this.$refs.sdCityDbAttacked.$refs.crud.$refs.table) {
              this.$refs.sdCityDbAttacked.$refs.crud.$refs.table.doLayout();
            }
          })
        }
      }
    },
    components: {
      sdCityDbAttacked,
      attackSdDbCountry
    }
  };
</script>

<style>
</style>
